<template>
	<el-card shadow="hover">
		<template v-slot:header>
			个人文件柜
			<div style="font-size: 14px;display: inline-block">
				<span style="margin-left: 20px;cursor: pointer;color:#606266;" :class="fileType===''?'select_action':''" @click="getPersonalFolderForDesk('')">我的文件</span>
				<span style="margin-left: 10px;cursor: pointer;color:#606266;" :class="fileType==='1'?'select_action':''" @click="getPersonalFolderForDesk('1')">他人共享</span>
			</div>
			<div style="float: right;display: inline-flex">
				<sc-icon style="cursor: pointer;width: 18px; margin-right: 10px;" @click="reLoadPersonalFile" title="刷新"><el-icon-refresh-right/></sc-icon>
				<sc-icon style="cursor: pointer;width: 18px;" @click="getMorePublicFile" title="全部"><el-icon-more-filled/></sc-icon>
			</div>

		</template>
		<div style="height: 210px;text-align: center;cursor: pointer">
			<el-row :gutter="15">
				<el-col style="padding: 10px;margin: 5px" :xl="3" :lg="3" :md="4" :sm="6" :xs="24" v-for="item in fileList" :key="item.folderId"
						@dblclick="openFolder(item)">
					<div style="text-align: center;">
						<el-icon style="font-size: 40px;">
							<el-icon-folder-opened/>
						</el-icon>
					</div>
					<div style="text-align: center;font-size: 16px;font-weight: 600;text-overflow: ellipsis;width: 100%;overflow: hidden;white-space: nowrap;" :title="item.folderName">
						{{ item.folderName }}
					</div>
				</el-col>
			</el-row>
		</div>
	</el-card>
</template>

<script>
export default {
	data() {
		return {
			fileType:'',
			fileList: [],
			timer:null
		}
	},
	created() {
		clearInterval(this.timer)
		this.timer = null
	},
	beforeUnmount() {
		clearInterval(this.timer);
		this.timer = null
	},
	mounted() {
		this.getPersonalFolderForDesk("");
		this.setTimer();
	},
	methods: {
		reLoadPersonalFile()
		{
			this.getPersonalFolderForDesk(this.fileType);
		},
		getMorePublicFile(){
			this.$nextTick(() => {
				this.$router.replace({
					path: '/file/personal',
				})
			})
		},
		openFolder(item)
		{
			this.$nextTick(() => {
				this.$router.replace({
					name: 'Personal File',
					params:{
						fileType:this.fileType,
						folderId:item.folderId,
						folderName:item.folderName,
						editRole:item.editRole,
					}
				})
			})
		},
		async getPersonalFolderForDesk(fileType) {
			this.fileType=fileType;
			let res;
			if(this.fileType=='')
			{
				this.fileType=fileType;
				res = await this.$API.file.personalFile.getPersonalFolderForDesk.get();
			}else{
				res = await this.$API.file.personalFile.getShareFileFolderForDesk.get();
			}
			if (res.code == 200) {
				this.fileList = res.data
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		setTimer() {
			if(this.timer == null) {
				this.timer = setInterval( () => {
					this.getPersonalFolderForDesk(this.fileType);
				}, this.$TOOL.data.get("MSG_TIME"))
			}
		}
	}
}
</script>
<style scoped>
.select_action{
	border-bottom: 2px solid #409EFF;
}
</style>
